<template>
	<view class="address" @click="selectAddress">
		<view class="addressleft">
			<view class="ssq">
				{{addressData[0].ssq}}
			</view>
			<view class="addressInfo">
				{{addressData[0].address}}
			</view>
			<view class="nameAndPhone">
				{{addressData[0].name}} {{addressData[0].phone}}
			</view>
		</view>
		<view class="addressleft">
			>
		</view>
	</view>
	<view class="goods">
		<view class="title">
			立白商城
		</view>
		<view style="display:flex;width:650rpx;height:200rpx;align-items: center;margin:30rpx auto;border:2rpx solid #ccc;border-radius:30rpx;" v-for="(item,i) in goodsData" :key="i">
		<view class="item">
			<view class="left">
				<image :src="item.skuimg[0].img" style="width:100rpx;" mode="widthFix"></image>
			</view>
			<view class="right">
				<view class="title">
					{{item.goods[0].name}} {{item.name}}
				</view>
				<view class="bottom">
					<text style="color:red;">{{item.price}}</text><text>数量x{{item.goodsNum}}</text>
				</view>
			</view>
		</view>
		</view>
	</view>
	<view class="pagebottom">
		<view class="price">
			6999.00
		</view>
		<view class="toPay" @click="toPay">
			立即支付
		</view>
	</view>
</template>

<script setup>
	import {ref} from 'vue'
	import { onLoad,onShow } from '@dcloudio/uni-app'
	import http from '../components/http.js'
	const addressData = ref([{ssq:'',address:'',name:"",phone:''}])
	const goodsData = ref([])
	onLoad((options)=>{
		console.log(options.sid)
		// goodsId.value = options.id
		http.http({url:'/address/queryDefaultAddress',method:'GET'}).then(res=>{
			addressData.value = res.data.data
		})
		http.http({url:`/goods/queryBysid?sid=${options.sid}`,method:'GET'}).then(res=>{
			console.log(res)
			goodsData.value = res.data.data
		})
	})
	onShow(()=>{
		console.log(uni.getStorageSync('addressId'))
		if(uni.getStorageSync('addressId')){
			http.http({url:'/address/queryById?id='+uni.getStorageSync('addressId'),method:'GET'}).then(res=>{
				addressData.value = res.data.data
			})
		}
	})
	function selectAddress(){
		uni.navigateTo({
			url:'address?select=1'
		})
	}
</script>

<style scoped>
	page{
		background:#f0f0f0;
	}
	.address{
		width:690rpx;
		margin:10rpx auto;
		display:flex;
		align-items: center;
		justify-content:space-between;
		padding:20rpx;
		box-sizing: border-box;
		background:#fff;
		border-radius:20rpx;
	}
	.goods{
		width:690rpx;
		margin:10rpx auto;
		padding:20rpx;
		box-sizing: border-box;
		background:#fff;
		border-radius:20rpx;
	}
	.item{
		display:flex;
	}
	.bottom{
		width: 450rpx;
		display:flex;
		justify-content:space-between;
	}
	.pagebottom{
		position:fixed;
		bottom:0;
		left:30rpx;
		display:flex;
		justify-content:space-between;
		align-items: center;
		width:690rpx;
		height:100rpx;
		margin:0 auto;
	}
	.toPay{
		width:200rpx;
		height:60rpx;
		line-height:60rpx;
		text-align: center;
		border-radius:30rpx;
		background:red;
		color:#fff;
	}
</style>